/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<template>
  <div class="box">
    <div class="header" @click="handlerTitle">
      <b class="line"></b>
      <p class="left"><b class="titleIcon"></b>{{data.title}}</p>
      <p class="middle" v-if="data.amount">({{data.amount}}{{tableData.unit}})</p>
      <p class="right">
        <i :class="['iconfont', 'icon-arrowright', panelVis ?　'iconshow' : 'iconhide']" style="display: inline-block;"></i>
      </p>
    </div>
    <div class="panel_box" ref="panel" :style="{height: panelHeight +　'px'}">
      <div class="panelContent" ref="panelContent">
        <table>
          <thead>
            <tr>
              <th v-for="(item,index) in tableData.header">{{item}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in data.item" :key="index">
              <td v-for="(j,k) in tableData.columns" :key="k">{{item[j]}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: [Object],
    index: Number,
    tableData: Object
  },
  data() {
    return {
      panelVis: false,
      height: 0,
      panelHeight: 0,
    };
  },
  watch: {
    panelVis: function(data) {
      if (data) {
        this.panelHeight = this.height;
      } else {
        this.panelHeight = 0;
      }
    }
  },
 
  methods: {
    handlerTitle() {
      this.panelVis = !this.panelVis;
    }
  },
  mounted() {
    console.log("this.index", this.index)
    if (this.index === 0) {
      this.panelVis = true;
    }
    let panelContent = this.$refs.panelContent;
    this.height = panelContent.offsetHeight;
    console.log("height", this.height)
  },
  components: {}
};

</script>
<style lang='less' scoped>
@import "../../util/theme.less";

.box {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  background: @white;

  .header {
    .mix-flex-center();
    padding: 6px;
    height: 34px;
    .line{
      width: 5px;
      height: 18px;
      background: @primary;
      border-radius: 2px;
      margin: 3px 6px 0;
      vertical-align: center;
    }
    .left {
      flex: 1;
      .mix-text-overflow();
    }
    .middle{
    }

    .right {
      width: 30px;
      .mix-flex-center();

      i {
        color: @font-regular;
      }
    }
  }

  .panel_box {
    width: 100%;
    height: auto;
    transition: all 0.3s;
    overflow: hidden;
    border-top: 1px solid @border-base;

    .panelContent {
      padding: 0 6px;
      table {
        width: 100%;

      }

      tr {}

      td,
      th {
        padding: 6px 0;
        font-size: 12px;
        text-align: center;
        border-bottom: 1px dashed @border-base;
      }
    }
  }
}

.iconfont {
  transition: all 0.3s;
}

.iconshow {
  transform: rotate(90deg);
}

.iconhide {
  transform: rotate(0deg);
}

</style>
